<template>
  <div class="pubarticle">
    <div class="bgg">
      <div class="card_title" @click="goback">
        <a-icon type="left"/>
        文章管理
      </div>
      <div class="groupbox flex row_left" style="margin-bottom: 19px">
        <span style="display:block;width: 60px;line-height: 32px;">分类：</span>
        <a-select
          label-in-value
          style="width: 207px;margin-right: 35px;"
          placeholder="选择分类"
          @change="userChange"
          class="br4"
          v-model="userid"
          allowClear
        >
          <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
            {{ v.name }}
          </a-select-option>
        </a-select>
        <span style="display:block;width: 60px;line-height: 32px;">标题：</span>
        <a-input placeholder="文章标题" v-model="title"/>
      </div>
      <div class="flex row_bet col_top">
        <div class="editorbox" style="margin-right: 17px;" ref="weditor">
          <editor-bar v-model="content" :value="content" @change="getEditor" ref="weditors"></editor-bar>
        </div>
        <div style="height:935px;text-align: center;position: relative">
          <a-upload-dragger
            name="file"
            :multiple="true"
            :showUploadList="false"
            action="https://app.letuilm.com/api/upload"
            @change="handleChange2"
            style="width: 510px;height: 264px"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox"/>
            </p>
            <p class="ant-upload-text">
              点击或将文件拖拽到这里上传
            </p>
            <p class="ant-upload-hint">
              支持扩展名：.rar .zip .doc .docx .pdf .jpg...
            </p>
          </a-upload-dragger>
          <img v-if="pic!== ''" :src="pic" alt="" style="height:400px;margin-top: 15px;">
          <div style="width: 510px;position: absolute;bottom: 0;">
            <a-button type="primary" class="dosurebtn" @click="doaddarticlecontent">确认发布</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { doaddarticlecontent, doeditarticlecontent, getarticleclass } from '@/api/articleApi'
  import EditorBar from '@/components/Editor/WangEditor'

  export default {
    name: 'Pubarticle',
    components: {
      EditorBar
    },
    data () {
      return {
        classList: [],
        userid: [],
        class_id: '',
        content: '',
        title: '',
        pic: '',
        id: ''
      }
    },
    computed: {
      rows: function () {
        return this.$store.getters.rows
      }
    },
    destroyed () {
      this.$store.dispatch('setRowsname', '')
    },
    created () {
      console.log(this.rows)
      if (this.rows.id) {
        this.title = this.rows.title
        this.pic = this.rows.pic
        this.id = this.rows.id
        this.class_id = this.rows.class_id
        this.content = this.rows.content
        this.userid = [
          {
            key: this.rows.class_id,
            label: this.rows.class_name
          }
        ]
      }
      this.getarticleclass()
    },
    mounted () {

    },
    methods: {
      goback () {
        this.$router.push({
          path: '/helpcenter/articleManage'
        })
      },
      getarticleclass () {
        getarticleclass().then(res => {
          console.log(res)
          this.classList = res.data
          if (this.rows.id) {
          this.$refs.weditors.setText(this.rows.content)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doaddarticlecontent () {
        if (this.id === '') {
          doaddarticlecontent({
            class_id: this.class_id,
            title: this.title,
            pic: this.pic,
            content: this.content
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('发布成功!')
              this.title = ''
              this.pic = ''
              this.content = ''
              this.$refs.weditors.setText('')
            } else {
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          doeditarticlecontent({
            id: this.id,
            class_id: this.class_id,
            title: this.title,
            pic: this.pic,
            content: this.content
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.title = ''
              this.pic = ''
              this.content = ''
              this.$refs.weditors.setText('')
            } else {
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },
      handleChange2 (info) {
        const status = info.file.status
        // fin_fileName
        if (status !== 'uploading') {
          console.log(info.file, info.fileList)
          this.pic = '//' + info.file.response.data.url
        }
        if (status === 'done') {
          this.$message.success(`${info.file.name} 上传成功!`)
        } else if (status === 'error') {
          this.$message.error(`${info.file.name} 上传失败!`)
        }
      },
      getEditor (value) {
        console.log(value)
        this.content = value
      },
      userChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.class_id = null
        } else {
          this.class_id = value.key
        }
      }
    }
  }
</script>
<style lang='less' scoped>
  .pubarticle {
    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
      cursor: pointer;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .editorbox {
      /deep/ .w-e-text-container {
        width: 1082px;
        min-height: 902px;
        background-color: #fff;
      }
    }

    .dosurebtn {

      width: 190px;
      height: 40px;
      border-radius: 4px;

    }

    /deep/ .ant-upload.ant-upload-drag {
      background-color: transparent;
    }
  }
</style>
